<template>
  <div class="dashboard-container">
    <div class="banner">
      <img src="../../assets/index/banner.png" alt="">
      <div class="main-container">
        <el-button class="banner-btn" type="primary" icon="icon el-icon-play">观看品牌视频</el-button>
      </div>
    </div>
    <div class="txt1 main-container">
      <h3>一次进化，止于完美</h3>
      <p>TPP医疗软件公司成立于1997年，总部位于英国利兹，成功研发SystmOne智慧医疗解决方案，</p>
      <p>实现英国临床信息的互联互通与再利用。</p>
      <el-button class="txt1-btn" type="primary">了解公司<i class="el-icon-minus el-icon--right"></i></el-button>
    </div>
    <div class="page-wraper page-wraper1">
      <p class="title">有了SYSTEMONE，世界会怎样？</p>
      <p><span class="ttp-line"></span></p>
      <el-row>
        <el-col :span="8"><div class="grid-content"><p class="title">48000000</p><span class="ttp-line"></span><p>超过4800万患者记录</p></div></el-col>
        <el-col :span="8"><div class="grid-content"><p class="title">6000</p><span class="ttp-line"></span><p>超过6000个NHS机构</p></div></el-col>
        <el-col :span="8"><div class="grid-content"><div class="title">100%</div><span class="ttp-line"></span><p>NHS信息处验证的100%系统可用性</p></div></el-col>
      </el-row>
      <el-button class="txt2-btn" type="primary">下载宣传册<i class="el-icon-minus el-icon--right"></i></el-button>
    </div>
    <div class="page-wraper page-wraper2">
      <p class="title">高效，智能，革新</p>
      <p class="title">专业的数字化医疗解决方案</p>
      <div class="wr">
        <p>遵循最新的国家标准与规范，全面实行数字化医疗管理，</p>
        <p>有效提升管理效率，并大幅节约成本。</p>
        <p><span class="ttp-line"></span></p>
      </div>
      <el-row>
        <el-col :span="8"><div class="grid-content"><div class="a"></div><p>AI智能</p></div></el-col>
        <el-col :span="8"><div class="grid-content"><div class="b"></div><p>大数据</p></div></el-col>
        <el-col :span="8"><div class="grid-content"><div class="c"></div><p>云平台</p></div></el-col>
      </el-row>
      <el-button class="txt2-btn" type="primary">下载宣传册<i class="el-icon-minus el-icon--right"></i></el-button>
    </div>
      <div class="page-wraper page-wraper3">
        <p class="title">开拓创新，创造价值</p>
        <p class="title">用大数据技术解决人类健康问题</p>
        <div class="wr">
          <p>创新的健康档案大数据技术，为各级政府和医疗机构提供数据分析、监测功能，</p>
          <p>为疾控预防、医疗科研提供强大的数据库支撑。</p>
        </div>

        <el-button class="txt2-btn" type="primary">下载宣传册<i class="el-icon-minus el-icon--right"></i></el-button>
      </div>
    <div class="news">
      <p>最新消息</p>
      <i class="el-icon-minus"></i>
    </div>
    <div class="news-list">
      <el-row>
        <el-col :span="12" class="rela">
          <img src="../../assets/index/news-1.png" alt="">
          <div class="news-wraper">
            <i class="el-icon-minus"></i>
            <p>TPP参与英中贸易协会</p>
            <p>中小企业论坛</p>
          </div>
        </el-col>
        <el-col :span="12" class="rela">
          <img src="../../assets/index/news-1.png" alt="">
          <div class="news-wraper">
            <i class="el-icon-minus"></i>
            <p>TPP参与英中贸易协会</p>
            <p>中小企业论坛</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="news-more">
      <p>更多新闻</p>
      <i class="el-icon-arrow-down"></i>
    </div>
    <div class="prd-more">
      <p>Products产品<i class="el-icon-arrow-right"></i></p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  text-align: center;
  .banner-btn {
    position: absolute;
    top: -63px;
    left: 0;
  }
  .txt1-btn {
    margin-top: 36px;
  }
  .txt1 {
    padding: 3.55rem 0 4.5rem 0;
    h3 {
      font-size: 1rem;
      color: #00006a;
      margin-bottom: 0.7rem;
    }
    p {
      font-size: 0.4rem;
      line-height: 1.5;
      color: #333333;

    }
  }
.page-wraper {
  padding: 3.125rem 0;
  position: relative;
  color: #ffffff;
  text-align: center;
  margin-bottom: -2px;
  .txt2-btn {
    margin-top: 1.5rem;
  }
  p {
    font-size: 0.4rem;
    line-height: 1.4;
    .ttp-line {
      margin-top: 0.5rem;
    }
  }
  p.title {
    font-size: 1rem;
    margin-top: 0rem;
  }
}
.page-wraper1 {
  background: url(../../assets/index/page-1.png) no-repeat center;
  background-size: cover;
  .el-row {
    margin-top: 2.5rem;
  }
}
.page-wraper2 {
  background: url(../../assets/index/page-1-2.png) no-repeat center;
  background-size: cover;
  p.title {
    line-height: 1.3;
  }
  .el-row {
    width: 80%;
    margin: 2.5rem auto 0 auto;
  }
  .a,.b,.c {
    display: inline-block;
  }
  .a {
    background: url(../../assets/index/i-index-a.png) no-repeat center;
    background-size: contain;
    width: 1.85rem;
    height: 1.7rem;
  }
  .b {
    background: url(../../assets/index/i-index-b.png) no-repeat center;
    background-size: contain;
    width: 1.85rem;
    height: 1.7rem;
  }
  .c {
    background: url(../../assets/index/i-index-c.png) no-repeat center;
    background-size: contain;
    width: 1.85rem;
    height: 1.7rem;
  }
  .wr {
    margin-top: 1rem;
  }
}
.page-wraper3 {
  background: url(../../assets/index/page-1-3.png) no-repeat center;
  background-size: cover;
  .wr {
    margin-top: 1rem;
  }
  p.title:nth-of-type(1) {
    margin-bottom: 1rem;
  }
}
.news {
  padding: 4.125rem 0 4rem 0;
  background: #181414;
  font-size: 1.1rem;
  color: #ffffff;
}
.news-list {
  .news-wraper {
    padding-top: 30%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    p {
      font-size: 0.6rem;
      color: #ffffff;
      line-height: 1.7;
    }

  }
}
.news-more {
  cursor: pointer;
  background: #181414;
  color: #ffffff;
  padding: 1rem 0;
  font-size: 0.58rem;
  .el-icon-arrow-down {
    font-size: 0.8rem;
  }
}
.prd-more {
  cursor: pointer;
  background: #f7f8f8;
  color: #c22c58;
  padding: 2.3rem 0;
  font-size: 1rem;
.el-icon-arrow-right {
  font-size: 1rem;
}
}
}
</style>
